import React, {Component} from 'react'
import {withRouter} from 'react-router-dom'
import {Modal} from 'antd'
import {connect} from 'react-redux'
import {logout} from '../../redux/actions'
import LinkButton from '../link-button'
import {reqWeather} from '../../api'
import menuList from '../../config/menuConfig'
import {formateDate} from '../../utils/dateUtils'
import './index.less'

/*左侧导航的组件 */
class Header extends Component {
    state = {
        currentTime: formateDate(Date.now()),// 当前时间字符串
        dayPictureUrl: '', // 天气图片 url
        weather: '', // 天气的文本
    }
    getTime = () => {
        // 每隔 1s 获取当前时间, 并更新状态数据currentTime
        this.intervalId = setInterval(() => {
            const currentTime = formateDate(Date.now())
            this.setState({currentTime})
        }, 1000)
    }
    getWeather = async () => {
        // 调用接口请求异步获取数据
        const {dayPictureUrl, weather} = await reqWeather('北京')
        //更新状态
        this.setState(
            {
                dayPictureUrl
                , weather
            }
        )
    }
    getTitle = () => {
        // 得到当前请求路径
        const path = this.props.location.pathname
        let title
        menuList.forEach(item => {
            if (item.key === path) {
                // 如果当前 item 对象的 key 与 path 一样,item 的 title 就是需要 显示的 title
                title = item.title
            } else if (item.children) {
                //在所有子 item 中查找匹配的
                const cItem = item.children.find(cItem => path.indexOf(cItem.key) === 0)
                //如果有值才说明有匹配的
                if (cItem) {
                    // 取出它的 title
                    title = cItem.title
                }
            }
        })
        return title
    }

    /*退出登陆 */
    logout = () => {
        // 显示确认框
        Modal.confirm({
            content: '确定退出吗?',
            onOk: () => {
                this.props.logout()
            }
        })
    }

    /*第一次 render()之后执行一次 一般在此执行异步操作: 发 ajax 请求/启动定时器 */
    componentDidMount() {
        // 获取当前的时间
        this.getTime()
        // 获取当前天气
        this.getWeather()
    }

    /*// 不能这么做: 不会更新显示 componentWillMount () { this.title = this.getTitle() }*/

    /*当前组件卸载之前调用 */
    componentWillUnmount () {
        // 清除定时器
        clearInterval(this.intervalId)
    }

    render() {
        const {currentTime, dayPictureUrl, weather} = this.state
        const username = this.props.user.username
        // 得到当前需要显示的title
        const title = this.props.headTitle
        return (
            <div className="header">
                <div className="header-top">
                    <span>
                        欢迎, {username}
                    </span>
                    <LinkButton onClick={this.logout}>
                        退出
                    </LinkButton>
                </div>
                <div className="header-bottom">
                    <div className="header-bottom-left">
                        {title}
                    </div>
                    <div className="header-bottom-right">
                        <span>
                            {currentTime}
                        </span>
                        <img src={dayPictureUrl} alt="weather"/>
                        <span>
                            {weather}
                        </span>
                    </div>
                </div>
            </div>
        )
    }
}
export default connect( state => ({ user: state.user, headTitle: state.headTitle }), {logout})(withRouter(Header))